<template>
  <div>
    <div class="User-bonus">
      <div class="count-down">
        <div class="distance">
          <span>开奖仅剩</span>
        </div>
        <div class="Countdown">
          <div class="Countdown-time background">
            <span class="three" id="_d">{{day}}</span>
          </div>
          <div class="Countdown-time">
            <span class="day">天</span>
          </div>
          <div class="Countdown-time background1">
            <span class="twelve" id="_h">{{hr}}</span>
          </div>
          <div class="Countdown-time">
            <span class="chance">时</span>
          </div>
          <div class="Countdown-time background2">
            <span class="twenty-one" id="_m">{{min}}</span>
          </div>
          <div class="Countdown-time">
            <span class="minute">分</span>
          </div>
        </div>
      </div>
    </div>
    <div class="Charade">
      <p class="time-quantum">本周字谜</p>
      <div class="writing" :class="{'The-second-sentence':item.status==1}" v-for="(item,index) in word_puzzles">
        <span @click="wordListClick(item,index)" class="field unse">{{item.word_puzzles}}</span>
        <vue-scratch-card
                v-if="item.status==1 && showcardindex==index"
                style="height: 0.9rem;line-height: 0.9rem"
                :clear-callback=clearCallback>
          <div slot='result'>
            恭喜您中{{showcardtoatle}}元
          </div>
        </vue-scratch-card>
      </div>

      <div class="click">
        <p class="Puzzles-to-attend">点击字谜参加</p>
        <p class="at-present">
          当前达成人数: <span class="red">{{indexData.people_number}}</span> 人
        </p>
      </div>
    </div>
    <div class="prior-period">
      <div class="last-time">上期奖金</div>
      <div class="acquisition">您获得了奖金:<span>￥{{indexData.previous_period_bonus}}</span></div>
      <div class="Official-Accounts">请至公众号"<a href="#">一字千金</a>"领取哦~</div>
    </div>

    <div class="fixed">
      <p class="transaction award">
        <a @click="getWordclick" href="javascript:void(0)">获取文字</a>
      </p>
      <p class="transaction gain"><a @click="toTrandLine" href="javascript:void(0)">交易行</a></p>
      <p class="transaction Trade-line"><a @click="toMyWord" href="javascript:void(0)">我的字库</a></p>
    </div>

    <!-- 弹框 -->
    <div id="fade" v-if="showMask==true || showLoginGetWord==true ||Selling_success==true ||join_success==true"
         class="black_overlay"></div>
    <!--任务弹框-->
    <div v-if="showMask" class="white_content">
      <div class="daily-mission">每日任务</div>
      <div class="WeChat-login flex-row flex-y-center">
        <div class="icon-imges">
          <img v-src="'/static/image/denglu.png'">
        </div>
        <div class="Login_applet">
          登录小程序
        </div>
        <div>1 / 1</div>
        <div class="off_the_stocks ok flex-grow-0 flex-x-center flex-y-center">已完成</div>
      </div>
      <div class="WeChat-login flex-row flex-y-center" @click="userwxshare">
        <div class="icon-imges">
          <img v-src="'/static/image/fenxiang.png'">
        </div>
        <div class="Login_applet">
          微信分享
        </div>
        <div>{{wxShareStatus?'1':'0'}} / 1</div>
        <div :class="{'ok':wxShareStatus}" class="off_the_stocks flex-grow-0 flex-x-center flex-y-center">
          {{wxShareStatus?'已分享':'未分享'}}
        </div>
      </div>

      <div class="userSettingbg" @click="userShareGuaid=!userShareGuaid" v-if="userShareGuaid"></div>

      <div class="WeChat-login flex-row flex-y-center" @click="user_yao_qing">
        <div class="icon-imges">
          <img v-src="'/static/image/yaoqing.png'" alt="">
        </div>
        <div class="Login_applet">
          邀请好友
        </div>
        <div>{{yaoqingStatus?'1':'0'}} / 1</div>
        <div :class="{'ok':yaoqingStatus}" class="off_the_stocks flex-grow-0 flex-x-center flex-y-center">
          {{yaoqingStatus?'已邀请':'未邀请'}}
        </div>
      </div>
      <div class="other_methods">其他方式</div>
      <div class="Official_Accounts">
        <span>微信公众号<span class="Every_word">"字字千金"</span></span>
        <a href="#" class="examine">查看更多获取文字方式</a>
      </div>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <!--微信登录后get_word的弹框-->
    <div v-if="showLoginGetWord" class="white_content">
      <div class="daily-mission">
        <span v-show="getWordTitleType==4">每日交易获得文字</span>
        <span v-show="getWordTitleType==1">每日登陆获得文字</span>
        <span v-show="getWordTitleType==2">每日分享获得文字</span>
        <span v-show="getWordTitleType==3">每日邀请获得文字</span>
      </div>
      <div class="Daily_share">
        <div class="Daily_share_img1">
          <img src="/static/image/paotong1.png">

        </div>
        <div class="Daily_share_Word">
          恭喜您获得
        </div>
        <div class="Daily_share_img2">
          <img src="/static/image/paotong2.png">
        </div>

      </div>
      <div class="green_character"
           :class="[{zise:get_word.quality==4},{blue:get_word.quality==3},{green:get_word.quality==2},{white:get_word.quality==1}]">
        {{get_word.word}}
      </div>
      <div class="Share_to_watch">

        <div class="flaunt" @click="getWordSharebtnclick">分享炫耀</div>

        <div class="Watch_the_video">观看视屏</div>

      </div>
      <div class="userSettingbg" @click="userShareGuaid=!userShareGuaid" v-if="userShareGuaid"></div>

      <div class="Share_and_watch">

        分享与观看有几率在获得1个相同的文字

      </div>

      <div @click="cancleClick_get_word" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <!--倒计时弹框-->
    <div v-if="Selling_success" class="white_content white_content_sale_ok">

      <div @click="cancle_sell_ok_Click" class="cancel flex-grow-0 flex-y-center flex-x-center">
        x
        <!--<div id="jiShi">{{timet}}</div>-->

      </div>

      <div class="sell_money">
        <span>{{sale_ok_data.bonus || sale_ok_data.total_price}}</span> 元
      </div>
      <div class="Share_to_show_off">
        <div class="flaunt1" @click="sellok_share_btn_click">
          分享炫耀
        </div>
        <div class="video_frequency">
          观看视屏
        </div>
      </div>
      <div class="userSet" @click="userShareGuaid=!userShareGuaid" v-if="userShareGuaid"></div>
      <div class="probability">
        分享与观看视频获得奖金
      </div>
    </div>

    <!--参与字谜成功弹框-->
    <div v-if="join_success" class="white_content white_content_sale_ok white_content_join_ok">

      <div @click="cancle_sell_ok_Click" class="cancel flex-grow-0 flex-y-center flex-x-center">
        x
        <!--<div id="jiShi">{{timet}}</div>-->
      </div>

      <div class="sell_money">
        <span>{{join_ok_data.bonus || join_ok_data.total_price}}</span> 元
      </div>
      <div class="Share_to_show_off">
        <div class="flaunt1" @click="join_ok_share_btn_click">
          分享炫耀
        </div>
        <div class="video_frequency">
          观看视屏
        </div>
      </div>
      <div class="userSet" @click="userShareGuaid=!userShareGuaid" v-if="userShareGuaid"></div>
      <div class="probability">
        分享与观看视频获得奖金
      </div>
    </div>
  </div>
</template>
<script>
  import {GETINDEXDATA, USERLOGIN, USERJOINPUZZLES, GETWXCONFIG, SHARE, MONEY} from 'src/const/uri'
  import MDUtils from 'src/assets/js/md-utils'
  import VueScratchCard from 'src/components/scratch-card'
  import {bodyScroll} from "src/assets/js/md-utils";
  import wx from 'weixin-js-sdk'

  export default {
    components: {VueScratchCard},
    data() {
      return {
        word_puzzles: [],
        userShareGuaid: false,
        indexData: {},
        day: 0, hr: 0, min: 0, sec: 0,
        timer: null,
        timer2: null,
        showMask: false,
        showLoginGetWord: false,
        Selling_success: false,
        join_success: false,
        get_word: {},
        sale_ok_data: {},
        join_ok_data: {},
        token: MDUtils.getQueryParam('token'),
        timet: 4,
        periods_number: '',//期数
        endTime: '',
        showcardindex: null,
        showcardtoatle: '',
        sharetype: 2,//2为微信分享 | 3为邀请用户 | 6为再次获取
        code: '',//记录放回的code
        wxShareStatus: false,
        yaoqingStatus: false,
        getWordTitleType: null,
        wxconfig: {
          title: '字字千金',
          desc: '这个是默认的分享',
          link: window.location.href.split('?')[0],
          imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
        }
      }
    },
    created() {
      // this.initData();
      if (!MDUtils.getQueryParam('token')) {
        this.login();
      } else {
        window.localStorage.setItem('ZM_token', MDUtils.getQueryParam('token'));
        this.initData();
      }
    },
    // 微信分享
    mounted() {
      this.$nextTick(() => {
        this.getConfig();
      })
    },
    methods: {
      // 微信分享方法
      getConfig() {
        //let url = location.href.split('#')[0] //获取锚点之前的链接
        this.$ajax.get(GETWXCONFIG, {
          url: encodeURIComponent(location.href.split('?')[0])
        }).then(res => {
          this.wxInit(res.data)
        });
      },
      wxInit(res) {
        var that = this;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ']
        });
        wx.ready(function () {
          // console.log('tome');
          // let shareObj = {
          //   title: '孝感瑞祥房产代理有限公司',
          //   desc: '诚信服务，专业二手房;欢迎你来',
          //   link: window.location.href,
          //   imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          // };
          // //分享给朋友
          // wx.onMenuShareAppMessage(shareObj);
          // //分享到朋友圈
          // wx.onMenuShareTimeline(shareObj);
          // //分享到QQ
          // wx.onMenuShareQQ(shareObj);
          wx.onMenuShareAppMessage({
            title: that.wxconfig.title,
            desc: that.wxconfig.desc,
            link: that.wxconfig.link,
            imgUrl: that.wxconfig.imgUrl,
            success: function () {
              that.$vux.toast.text('谢谢您的分享');
            }
          })
        })
      },

      //用户点击微信分享
      userwxshare() {
        if (!this.wxShareStatus) {
          this.userShareGuaid = true;
          this.sharetype = 2;
          var that = this;
          this.wxconfig = {
            title: '字字千金--微信分享',
            desc: '字字千金--微信分享',
            imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          };
          wx.onMenuShareAppMessage({
            title: that.wxconfig.title,
            desc: that.wxconfig.desc,
            link: that.wxconfig.link,
            imgUrl: that.wxconfig.imgUrl,
            success: function () {
              that.showMask = false;
              that.userShareGuaid = false;
              that.$ajax.get(SHARE, {
                type: that.sharetype,
                word_id: that.sharetype == 6 ? that.get_word.id : '',
                id: that.sharetype == 7 ? that.sale_ok_data.id : '',
              }).then(res => {
                if (that.sharetype == 6) {
                  that.showLoginGetWord = false;
                  that.sharetype = 2;
                  that.$vux.toast.show({
                    text: res.msg,
                    time: 3000,
                    width: '12em'
                  })
                }
                that.wxShareStatus = true;
                that.initData()
              })
            }
          })
        }
      },
      //用户邀请
      user_yao_qing(){
        if (!this.yaoqingStatus) {
          this.userShareGuaid = true;
          this.sharetype = 3;
          var that = this;
          this.wxconfig = {
            title: '字字千金--邀请好友',
            desc: '字字千金--邀请好友',
            imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          };
          wx.onMenuShareAppMessage({
            title: that.wxconfig.title,
            desc: that.wxconfig.desc,
            link: that.wxconfig.link,
            imgUrl: that.wxconfig.imgUrl,
            success: function () {
              that.showMask = false;
              that.userShareGuaid = false;
              that.$ajax.get(SHARE, {
                type: that.sharetype,
                word_id: that.sharetype == 6 ? that.get_word.id : '',
                id: that.sharetype == 7 ? that.sale_ok_data.id : '',
              }).then(res => {
                if (that.sharetype == 6) {
                  that.showLoginGetWord = false;
                  that.sharetype = 2;
                  that.$vux.toast.show({
                    text: res.msg,
                    time: 3000,
                    width: '12em'
                  })
                }
                that.yaoqingStatus = true;
                that.initData()
              })
            }
          })
        }
      },
      getWordSharebtnclick() {
        var that = this;
        this.userShareGuaid = true;
        this.sharetype = 6;
        this.wxconfig = {
          title: '字字千金--获取文字再次分享',
          desc: '字字千金--获取文字再次分享',
          imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
        };
        wx.onMenuShareAppMessage({
          title: that.wxconfig.title,
          desc: that.wxconfig.desc,
          link: that.wxconfig.link,
          imgUrl: that.wxconfig.imgUrl,
          success: function () {
            that.showMask = false;
            that.userShareGuaid = false;
            that.$ajax.get(SHARE, {
              type: that.sharetype,
              word_id: that.sharetype == 6 ? that.get_word.id : '',
              id: that.sharetype == 7 ? that.sale_ok_data.id : '',
            }).then(res => {
              if (that.sharetype == 6) {
                that.showLoginGetWord = false;
                that.sharetype = 2;
                that.$vux.toast.show({
                  text: res.msg,
                  time: 3000,
                  width: '12em'
                })
              }
              that.initData()
            })
          }
        })
      },
      sellok_share_btn_click() {
        let that = this;
        this.userShareGuaid = true;
        this.wxconfig = {
          title: '字字千金--出售成功分享',
          desc: '字字千金--出售成功分享',
          imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
        };
        wx.onMenuShareAppMessage({
          title: that.wxconfig.title,
          desc: that.wxconfig.desc,
          link: that.wxconfig.link,
          imgUrl: that.wxconfig.imgUrl,
          success: function () {
            if (that.code == 2 || that.code == 4) {
              that.$ajax.get(MONEY, {
                type: that.code,
                id: that.sale_ok_data.id,
              }).then(res => {
                // that.$vux.toast.text(res.msg)
                that.$vux.toast.show({
                  text: res.msg,
                  time: 3000,
                  width: '12em'
                });
                that.Selling_success = false;
                this.userShareGuaid = true;
                that.initData()
              })
            }
          }
        })
      },
      join_ok_share_btn_click() {
        let that = this;
        this.userShareGuaid = true;
        this.wxconfig = {
          title: '字字千金--出售成功分享',
          desc: '字字千金--出售成功分享',
          imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
        };
        wx.onMenuShareAppMessage({
          title: that.wxconfig.title,
          desc: that.wxconfig.desc,
          link: that.wxconfig.link,
          imgUrl: that.wxconfig.imgUrl,
          success: function () {
            if (that.code == 2 || that.code == 4) {
              that.$ajax.get(MONEY, {
                type: that.code,
                id: that.join_ok_data.id,
              }).then(res => {
                // that.$vux.toast.text(res.msg)
                that.$vux.toast.show({
                  text: res.msg,
                  time: 3000,
                  width: '12em'
                });
                that.join_success = false;
                this.userShareGuaid = true;
                that.initData()
              })
            }
          }
        })
      },

      login() {
        // var appid = 'wx2bd600627e045057';//正式
        // var redirectUri = encodeURIComponent('http://api.huoyunsh.com/api/Member/login?urlType=1'); //正式
        var appid = 'wxd1f4a8ddeb34cba1';
        var redirectUri = encodeURIComponent('http://192.168.31.144:84/api/Member/login?urlType=1'); // 授权接口地址
        var state = "abc";
        var scope = 'snsapi_userinfo';//snsapi_base //snsapi_userinfo
        var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect&connect_redirect=1`;
        window.location.href = url;
      },
      initData() {
        this.$ajax.get(GETINDEXDATA, {
          periods_number: this.periods_number
        }).then(res => {
          if (res.code == 2) {
            this.code = 2;
            this.Selling_success = true;
            this.sale_ok_data = res.data;
            // this.timer2 = setInterval(this.timeFn, 1000)
            // bodyScroll.stop();
          } else if (res.code == 1) {
            this.indexData = res.data;
            console.log(this.indexData)
            this.word_puzzles = res.data.word_puzzles;
            // this.countdown(this.formatDate(res.data.end_time))
            // console.log(res.data.end_time);
            // console.log(this.formatDate(res.data.end_time));
            this.endTime = res.data.end_time * 1000;
            this.countdown(this.endTime);
          } else if (res.code == 3) {
            this.showLoginGetWord = true;
            this.getWordTitleType = res.data.type;
            this.get_word = res.data.get_word;
            bodyScroll.stop();
          } else if (res.code == 4) {
            this.code = 4;
            this.join_success = true;
            this.join_ok_data = res.data;
          }
        });
      },
      getWordclick() {
        this.showMask = true;
        bodyScroll.stop();
      },
      cancleClick() {
        this.showMask = false;
        bodyScroll.move();
      },
      cancle_sell_ok_Click() {
        this.Selling_success = false;
        this.join_success = false;
        this.initData();
      },
      cancleClick_get_word() {
        this.showLoginGetWord = false;
        bodyScroll.move();
        this.initData();
      },
      userSettingListClick(index) {
        if (index == 1) {
          this.showBindPhone = true
        }
        this.userShareGuaid = false;
      },
      toTrandLine() {
        // let beforeUrl1 = window.location.origin+'/tradeLine.html';
        let beforeUrl = document.URL.replace(/index/g, "tradeLine").split('?')[0];
        window.location.href = beforeUrl;
      },
      toMyWord() {
        let beforeUrl = document.URL.replace(/index/g, "user").split('?')[0];
        let afterurl = `${beforeUrl}?token=${window.localStorage.getItem('ZM_token')}`;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = afterurl
      },
      countdown(endtime) {
        // console.log(endtime+'endtime')
        // const testtime = '2019-02-15 18:52';
        // const end = new Date(testtime.replace(/-/g, '/')).getTime();
        const now = new Date().getTime();

        const msec = endtime - now;
        console.log(msec);
        if (msec > 0) {
          let day = parseInt(msec / 1000 / 60 / 60 / 24);
          let hr = parseInt(msec / 1000 / 60 / 60 % 24);
          let min = parseInt(msec / 1000 / 60 % 60);
          let sec = parseInt(msec / 1000 % 60);
          this.day = day;
          this.hr = hr > 9 ? hr : '0' + hr;
          this.min = min > 9 ? min : '0' + min;
          this.sec = sec > 9 ? sec : '0' + sec;
        } else {
          this.periods_number = this.word_puzzles[0].periods_number;
          this.initData();
          clearTimeout(this.timer);
          return
        }
        this.timer = setTimeout(() => {
          this.countdown(this.endTime)
        }, 60000)
      },
      timeFn() {
        this.timet--;
        if (this.timet <= 0) {
          clearInterval(this.timer2);
          // window.location.reload()
          // clearInterval(this.timer2);
          // this.Selling_success = false;
          // this.initData();
        }
      },
      wordListClick(item, index) {
        // console.log(item);
        // console.log(index)
        if (item.status == 1) {
          var that = this;
          this.$vux.confirm.show({
            // 组件除show外的属性
            title: '提示',
            content: '确定要参加字谜刮奖吗？',
            // onCancel() {
            // console.log(this) // 非当前 vm
            // console.log(_this) // 当前 vm
            // },
            onConfirm() {
              that.showcardindex = index;
              that.$ajax.get(USERJOINPUZZLES, {
                periods_number: item.periods_number,
                entry_id: item.id,
                word_puzzles: item.word_puzzles,
                quality: item.quality
              }).then(res => {
                that.showcardtoatle = res.data;
                //this.showcardtoatle = 100;
                // console.log(res);
              });
            }
          })
        }
      },
      formatDate(timestamp) {
        let oDate = new Date();
        oDate.setTime(timestamp * 1000);
        let y = oDate.getFullYear();
        let m = oDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        let d = oDate.getDate();
        d = d < 10 ? '0' + d : d;
        return `${y}-${m}-${d}`;
      },
      clearCallback() {
        console.log('清除完毕！');
        let that = this;
        setTimeout(() => {
          let that = this;
          this.$vux.confirm.show({
            // 组件除show外的属性
            title: '提示',
            content: `恭喜您获得了${that.showcardtoatle}元`,
            onCancel() {
            },
            onConfirm() {
              // that.initData();
              window.location.reload()
            }
          })
        }, 500)
      }
    },
  }

</script>
<style>
  @import "../style/index.css";
</style>
